.Expression-node {
  /* this is required to get top/bottom padding to work, but breaks some keyboard shortcuts */
  /*display: inline-block;*/
  border-radius: 3px;
  font-size: 14px;
}

.Expression-open-quote,
.Expression-close-quote {
  opacity: 0.5;
}

.Expression-aggregation {
  padding: 3px 3px;
}
.Expression-aggregation-name {
  padding: 0 2px;
}

.Expression-metric,
.Expression-field {
  margin: 1px 1px;
  padding: 1px 3px;
}

.Expression-aggregation,
.Expression-metric {
  border: 1px solid var(--color-accent1);
  background-color: var(--color-bg-white);
}

.Expression-field {
  border: 1px solid var(--color-brand);
  background-color: var(--color-bg-medium);
}

.Expression-selected.Expression-aggregation,
.Expression-selected.Expression-metric,
.Expression-selected .Expression-aggregation,
.Expression-selected .Expression-metric {
  color: white;
  background-color: var(--color-accent1);
}

.Expression-selected.Expression-field,
.Expression-selected .Expression-field {
  color: white;
  background-color: var(--color-brand);
}
